<template>

  <a-modal ref="modalRef" v-model:open="open" width="70%" @ok="submitbtn">
    <div style="height: 50px;"></div>
    <div class="card-box">
      <SearchView @query="querybtn" @reset="resetbtn" />
    </div>

    <div class="card-box box mt-5">
      <a-table :columns="columns" :data-source="data?.items" :customRow="{
        onClick: onClick,
      }" :pagination="false" :loading="loading" rowKey="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'avatar'">
            <a-image :width="100" :src="record.avatar" />
          </template>
          <template v-if="column.key === 'gender'">
            <a-tag :bordered="false" color="processing">{{ record.gender == 1 ? '男' : record.gender == 2 ? '女' : '未知'
            }}</a-tag>
          </template>
        </template>

      </a-table>
      <PageView :total="newdata.total" v-model:current="newdata.current" v-model:pageSize="newdata.pagesize"
        @change="pagechange" />
    </div>
  </a-modal>
</template>
<script setup>
import { computed, reactive, ref } from 'vue';
import PageView from "#/components/PageView/index.vue";
import SearchView from "./SearchView.vue";

import { useRequest, createUseRequestComponent } from "vue-hooks-plus";
import * as api from '#/api/core/user';





const props = defineProps({
  value: {
    type: Boolean,
    default: false
  }
})

const newdata = reactive({
  current: 1,
  pagesize: 10,
  query: {},
  total: 0,
})


const columns = [
  {
    title: "头像",
    dataIndex: "avatar",
    align: "center",
    key: "avatar",
    width: 200,
  },
  {
    title: "营养师名称",
    dataIndex: "nickName",
    align: "center",
    key: "nickName",
  },
  {
    title: "性别",
    dataIndex: "gender",
    align: "center",
    key: "gender",
  },
];

const emits = defineEmits(['update:value', 'submit'])


const open = computed({
  get() {
    return props.value
  },
  set(val) {

    console.log('触发');

    emits('update:value', val)
  }
})

const { data, loading, error, run } = useRequest(
  () =>
    api.$getUserlist({
      IsDietitian: true,
      ...newdata.query,
      SkipCount: (newdata.current - 1) * newdata.pagesize,
      MaxResultCount: newdata.pagesize
    }),
  {
    manual: true, //手动触发
    onSuccess: (result) => {
      console.log("获取yi8ngyansghi1数据", result);
      // 此时 data.value 与 result 是一致的


      newdata.total = result.total
      console.log("data.value：", data.value);
    },
  }
);
run()

const querybtn = (e) => {
  console.log("e", e);
  newdata.query = e;
  run();
};

const resetbtn = (e) => {
  newdata.query = e;
  console.log('重置表单', e, newdata.query
  );

  run();
};


const pagechange = () => {
  run()
}






const submitbtn = () => {
  emits('submit', newdata.selectlist)
  open.value = false
  console.log(' chufa1', newdata.open);

}

// 单击选择
const onClick = (e) => {
  console.log('object :>> ', e);
}



</script>

<style lang="scss" scoped></style>
